<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章管理首页</title>
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../font/iconfont.css">
  <link rel="stylesheet" href="../../css/wenzhangguanli/wenzhangguanlishouye.css">
  <script src="../../javaScript/wenzhangguanli/wenzhangshouyeshuju.js"></script>
  <script src="../../javaScript/public.js"></script>
  <script src="../../lib/session.js"></script>
  <!-- <script src="../../javaScript/orderform/orderformlist.js"></script> -->
</head>

<body>
  <div class="container nav_header">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-3 col-xs-3">
            文章类别 <select name="" id="input_f" class="drop_down">
              <option value="">请选择分类</option>
              <option value="送女友">送女友</option>
              <option value="送男友">送男友</option>
              <option value="送长辈">送长辈</option>
              <option value="送父母">送父母</option>
              <option value="送老师">送老师</option>
              <option value="送老公">送老公</option>
              <option value="送老婆">送老婆</option>
              <option value="送闺蜜">送闺蜜</option>
            </select>
          </div>
          <div class="col-md-3 col-xs-3">
            推荐类型 <select name="" id="input_s" class="drop_down">
              <option value="">请选择推荐类型</option>
              <option value="同类置顶">同类置顶</option>
              <option value="栏目推荐">栏目推荐</option>
            </select>
          </div>
          <div class="col-md-3 col-xs-3"> 文章名称
            <input type="text" placeholder="文章名称" class="drop_down" value="" id="input_c">
          </div>
          <div class="col-md-3 col-xs-3"></div>
        </div>
      </div>
      <div class="col-md-2 col-xs-2 content_right">
        <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
        <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-1 col-xs-1">
            <span class="iconfont icon-shujukuliebiao">&nbsp;&nbsp;</span>数据列表
          </div>
          <div class="col-md-1 col-xs-1 del">
            <button class="shanchu "><span class="iconfont icon-shanchu"></span>删除</button>
          </div>
        </div>
      </div>
      <div class="col-md-2 content_right  add"> <button class="xinzeng"><span>+ </span>新增</button></div>
    </div>
    <table class="table table-striped mtable">
      <thead id="thead">
        <tr class="table_row mwidth">
          <th><input type="checkbox" name="" id="check" class="box-checkbox allcheck "></th>
          <th>序号</th>
          <th>封面图</th>
          <th>文章标题</th>
          <th>文章类别</th>
          <th>浏览量</th>
          <th>收藏</th>
          <th>转发</th>
          <th>评论</th>
          <th>排序</th>
          <th>操作</th>
          <th>查看详情</th>
        </tr>
      </thead>
      <tbody id="mytbody" class="table_row table_content">

      </tbody>
    </table>
    <div class="row table_page">
      <div class="col-md-7 col-xs-7 xuanze">
        <input type="checkbox" class="box-checkbox quanxuan " value=""><span> 全选</span>
      </div>
      <nav aria-label="Page navigation" class="col-md-4 col-xs-4 fpagenum">
        <div class="back stop">
          <span class="iconfont">&#xe64b;</span>
        </div>
        <ul class="pagenum">

        </ul>
        <div class="next">
          <span class="iconfont">&#xe62b;</span>
        </div>
      </nav>
      <div class="col-md-1 col-xs-1 page_num">
        <ul name="" id="page_num">
          <li value="10">10条/页<span class="iconfont icon-arrow-down"></span></li>
          <li value="15">15条/页</li>
          <li value="20">20条/页</li>
          <li value="25">25条/页</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="deltankuang">
    <div><span class="quxiao">X</span></div>
    <div>
      <span>？</span><span>&nbsp;&nbsp; 确定要删除当前数据吗？</span>
    </div>
    <div class="row del_xiugai">
      <div class="col-md-6 col-xs-6"></div>
      <div class="col-md-3 col-xs-3 queding"><button>确定</button></div>
      <div class="col-md-3 col-xs-3 quxiao"><button>取消</button></div>
    </div>
  </div>
  <div class="cheng clear">
    <div>√</div>
    <div>恭喜你，同类置顶成功!</div>
  </div>
  <div class="tui clear">
    <div>√</div>
    <div>恭喜你，栏目推荐成功!</div>
  </div>

  <script>
    // let shujuData = txtData
    // let dangqianye = 1
    // let num = 1
    // let maxPage
    // function showTable(data) {
    //   for (let i = 0; i < data.length; i++) {
    //     $('.table_content').append(
    //       `<tr>
    //       <td><input type="checkbox" name=""></td>
    //       <td>${data[i].id}</td>
    //       <td class="icon_anniu"><img src="../../lib/img/tp.png" alt="" class="tupian">  </td>
    //       <td>${data[i].title}</td>
    //       <td>${data[i].cate}</td>
    //       <td>${data[i].Views}</td>
    //       <td>${data[i].coll}</td>
    //       <td>${data[i].forward}</td>
    //       <td>${data[i].comment}</td>
    //       <td>${data[i].sort}</td>
    //       <td>
    //       <span onclick="del()" class="btn_shanchu">删除</span>
    //       <span onclick="change()" class="bianji" >编辑</span>
    //       <span onclick="top()" class="tongleizhiding">同类置顶</span>
    //       <span onclick=" col()" class="tuijian">栏目推荐</span>
    //       </td>
    //       <td><p>查看详情</p></td>

    //       </tr>`
    //     )
    //   }
    // }
    // let pagingData = txtData
    // let num = 1 //初始页
    // let lengthPage //最大页数
    // // 渲染页数
    // function showPage(data) {
    //   $('.pagination').html(`    <li class="prePage">
    //                     <a href="#" aria-label="Previous">
    //                         <span aria-hidden="true">&laquo;</span>
    //                     </a>
    //                 </li>

    //                 <li class="nextPage">
    //                     <a href="#" aria-label="Next">
    //                         <span aria-hidden="true">&raquo;</span>
    //                     </a>
    //                 </li>`) //每次渲染前刷新一下渲染的内容
    //   lengthPage = Math.ceil(data.length / 10) //lengthPage是最大页数
    //   if (lengthPage <= 4) {
    //     for (let i = 1; i <= lengthPage; i++) {
    //       $('.pagination li:last-of-type').before(`
    //                         <li class="new_page active"><a href="#">${i}</a></li>
    //                         `)
    //     }

    //   } else if (lengthPage > 4) {
    //     for (let i = 1; i <= lengthPage; i++) {
    //       $('.pagination li:last-of-type').before(`
    //                         <li class="new_page"><a href="#">${i}</a></li>
    //                         `)
    //     }
    //     $('.new_page').eq(0).addClass('active')

    //     $('.new_page').slice(3, lengthPage - 1).css({
    //       display: 'none'
    //     })
    //     $('.new_page').eq(3).after(`<li class="new_page"><a href="#">...</a></li>`)
    //   }

    // }
    // showPage(pagingData)
    // let start //每一页的起始坐标
    let nowpage = 1;
    let alldata = []
    let content = "`" +
      '<tr class="mwidth">' +
      '<td>' +
      '<input type="checkbox" id="" value="" class="box-checkbox">' +
      '</td>' +
      '<td>${txtData[i].id}</td></td>' +
      ' <td class="icon_anniu"><img src="../../lib/img/tp.png" alt="" class="tupian">  </td>' +
      '<td>${txtData[i].title}</td>' +
      ' <td>${txtData[i].cate}</td>' +
      '<td>${txtData[i].Views}</td>' +
      '<td>${txtData[i].coll}</td>' +
      '<td>${txtData[i].forward}</td>' +
      '<td>${txtData[i].comment}</td>' +
      '<td>${txtData[i].sort}</td>' +
      '<td>' +
      ' <span onclick="del(this)" class="btn_shanchu"><a>删除</a></span>' +
      '<span onclick="change()" class="bianji" ><a href="../wenzhangguanli/xinzengwenzhang.html">编辑</a></span>' +
      '<span onclick="top()" class="tongleizhiding"><a>同类置顶</a></span>' +
      '<span onclick=" col()" class="tuijian"><a>栏目推荐</a></span>' +
      '</td>' +
      '<td><a href="../wenzhangguanli/chakanxiangqing.html">查看详情</a></td>' + '</tr>' + '`'
    let pagecontent = "`" +
      "<li>" +
      "${i+1}" +
      "</li>"
      + "`"
    window.onload = function () {
      page(txtData, ".mtable", 10, content, 1)
      pagenum(txtData, ".pagenum", 10, pagecontent)
      ingo(txtData, '.pagenum', ".mtable", 10, pagecontent, content)
    }
    // let checkedBoole
    // $('.quanxuan').click(function () { //全选按钮
    if ($(this).prop('checked') == true) {
      $(".table_content input").prop("checked", true)
    } else {
      $(".table_content input").prop("checked", false)
    }
    // })
    // $('.table_content input').click(function () { //获取checked是否为选中
    //   console.log($("input[checkbox='false']"));
    //   console.log($("input[type='checkbox']"));
    //   if ($(this).prop('checked') == true) { //选中的时候执行这个结果
    //     $('.shanchu').click(function () {
    //       console.log($("input[checked='true']"));
    //     })

    //   } else { //未选中的时候执行这个结果
    //     checkedBoole = $(this).prop('checked')
    //     $('.shanchu').click(function () {
    //       console.log(11111)
    //     })

    //   }
    // })
    var $checkbox = $(':checkbox')
    $('.quanxuan').click(function () {
      if ($(this).prop('checked') == true) {
        $checkbox.prop('checked', true)
        $(".table_content input").prop("checked", true)
      } else {
        $(".table_content input").prop("checked", false)
        $checkbox.prop('checked', false)
      }

    })
    //重置
    $('.chongzhi').click(function () {
      $('#mytbody').html()
      page(txtData, ".mtable", 15, content, 1)
      pagenum(txtData, ".pagenum", 10, pagecontent)
      ingo(txtData, '.pagenum', ".mtable", 15, pagecontent, content)
    })
    $('.bianji').click(function (params) {

    })

    //同类推荐
    $(function () {
      $('.tongleizhiding').click(function () {
        $('.cheng').show().delay(2000).hide(100)
      })
    })
    //栏目推荐
    $(function () {
      $('.tuijian').click(function () {
        $('.tui').show().delay(2000).hide(100)
      })
    })


    //删除





    //删除弹框

    // function del() {
    //   let shanchu = document.getElementsByClassName('btn_shanchu')
    //   let deltankuang = document.getElementById('deltankuang')
    //   deltankuang.style.display = 'block'

    // }
    // $('.quxiao').click(function () {
    //   $("#deltankuang").css("display", 'none')
    // })
    // $('.queding').click(function () {
    //   $("#deltankuang").css("display", 'none')
    //   $('.btn_shanchu').click(function () {
    //     $(this).parent().parent().remove()
    //   })

    // })
    function init(data, pagelocation, contentloaction, pagesnum, pagecontent, content, nowpage) {
      page(data, contentloaction, pagesnum, content, nowpage)
      pagenum(data, pagelocation, pagesnum, pagecontent)
      ingo(data, pagelocation, contentloaction, pagesnum, pagecontent, content)
      back(data, pagelocation, contentloaction, pagesnum, pagecontent, content)
      next(data, pagelocation, contentloaction, pagesnum, pagecontent, content)
    }



    function del(e) {
      let deltankuang = document.getElementById('deltankuang')
      deltankuang.style.display = 'block'
      $('.quxiao').click(function () {
        $("#deltankuang").css("display", 'none')
      })
      $('.queding').click(function () {
        $("#deltankuang").css("display", 'none')
        for (let i = 0; i < txtData.length; i++) {
          if (txtData[i].id == $($(e).parent().parent()).find('td')[1].innerHTML) {
            txtData.splice(i, 1)
          }
        }
        init(txtData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)

      })

    }
    $('.xinzeng').click(function () {
      window.location.href = '../wenzhangguanli/xinzengwenzhang.html'
    })


    // var ipts = document.querySelectorAll('tbody input');
    // // 获取tbody下的tr
    // var trs = document.querySelectorAll('tbody tr');
    // var iptsArray = Array.from(ipts);   // 把伪数组转换为真数组
    // // 点击全选选择所有的复选框
    // check.onclick = function () {
    //   if (this.checked) {
    //     for (let i = 0; i < ipts.length; i++) {
    //       ipts[i].checked = true;    //每个复选框设置为勾选状态
    //       trs[i].className = 'selected';    //增加class
    //     }
    //   } else {
    //     for (i = 0; i < ipts.length; i++) {
    //       ipts[i].checked = false;    //每个复选框设置为不勾选状态
    //       trs[i].className = '';    //删除class
    //     }
    //   }
    // }
    // // 单独的选中效果
    // for (let i = 0; i < ipts.length; i++) {
    //   ipts[i].onchange = function () {
    //     if (ipts[i].checked) {
    //       ipts[i].checked = true;
    //       trs[i].className = 'selected';
    //     } else {
    //       ipts[i].checked = false;
    //       trs[i].className = '';
    //     }
    //     // 全部选中
    //     var res1 = iptsArray.every(function (ele) {
    //       return ele.checked;
    //     })
    //     if (res1) {
    //       check.checked = true;
    //     }
    //     // 全部不选中
    //     var res2 = iptsArray.every(function (ele) {
    //       return !(ele.checked);
    //     })
    //     if (res2) {
    //       check.checked = false;
    //     }
    //     // 半选状态
    //     if (!res1 && !res2) {
    //       check.indeterminate = true;
    //     } else {
    //       check.indeterminate = false;
    //     }
    //   }
    // }
  </script>
</body>

</html>